<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="_token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="/assets/css/layui.css">
    <link rel="stylesheet" href="/assets/css/view.css"/>
    <link rel="icon" href="/favicon.ico">
    <title>管理后台</title>
    <style type="text/css">
    .layui-table-cell img{
      width:40px;
      height:30px;
    }
    </style>
</head>
<body class="layui-view-body">
    <div class="layui-content">
        <div class="layui-page-header">
            <div class="pagewrap">
              <button class="layui-btn layui-btn-blue layui-btn-sm" onclick="addCourse()"><i class="layui-icon">&#xe654;</i>新增</button>
              <a class="layui-btn layui-btn-blue layui-btn-sm" title="刷新当前页" href="javascript:void(0);" onclick="layer.load(1);window.location.reload(true);"><i class="layui-icon"></i>刷新</a>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="form-box">
                        <div class="layui-form layui-form-item">
                            <div class="layui-inline">
                                <div class="layui-form-mid">课程:</div>
                                <div class="layui-input-inline" style="width: 200px;">
                                  <input type="text" placeholder="课程/老师/账号" id="key" name="key" value="" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid">启用:</div>
                                <div class="layui-input-inline" style="width: 100px;">
                                    <select name="state">
                                        <option value="0">全部</option>
                                        <option value="1">启用</option>
                                        <option value="2">禁用</option>
                                    </select>     
                                </div>

                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" placeholder="开始时间" name="start_time" id="start_time">
                                </div>
                                <div class="layui-form-mid layui-word-aux" style="display: inline;">-</div>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" placeholder="结束时间" name="end_time" id="end_time">
                                </div>

                                <button style="height:38px;line-height:38px;float:left;" class="layui-btn layui-btn-blue layui-btn-sm" id="searchBtn">搜索</button>
                            </div>
                        </div>
                        <table id="demo" lay-filter="dataTable"></table>
                        <script type="text/html" id="options">
                          <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                        </script>
                        <!-- <script type="text/html" id="recommendTpl">
                          @{{# if(d.recommend==1){ }}
                            <span class="layui-btn layui-btn-success layui-btn-xs" style="cursor:pointer;" id="recommend_@{{d.id}}" onClick="recommend_off(@{{d.id}});">已推荐</span>
                          @{{#  } else if(d.recommend==2){ }}
                            <span class="layui-btn layui-btn-disabled layui-btn-xs" style="cursor:pointer;" id="recommend_@{{d.id}}"  onClick="recommend_on(@{{d.id}});">未推荐</span>
                          @{{#  } }}
                        </script> -->
                        <script type="text/html" id="stateTpl">
                          @{{# if(d.state==1){ }}
                            <span class="layui-btn layui-btn-success layui-btn-xs" style="cursor:pointer;" id="state_@{{d.id}}" onClick="state_off(@{{d.id}});">已启用</span>
                          @{{#  } else if(d.state==2){ }}
                            <span class="layui-btn layui-btn-disabled layui-btn-xs" style="cursor:pointer;"id="state_@{{d.id}}"  onClick="state_on(@{{d.id}});">已禁用</span>
                          @{{#  } }}
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/assets/layui.all.js"></script>
    <script>
      var element = layui.element;
      var table = layui.table;
      var form = layui.form;
      var $=layui.jquery;
      var laydate = layui.laydate;
      var key = $("#key").val()
      var state=$("select[name=state]").val();
      var start_time = $("#start_time").val()
      var end_time = $("#end_time").val();

      //日期时间选择器
      laydate.render({
          elem: '#start_time'
          ,type: 'datetime'
      });
      laydate.render({
          elem: '#end_time'
          ,type: 'datetime'
      });
      
      //展示已知数据
      var dataTable =table.render({
        elem: '#demo'
        ,url: "{{ route('customer.coursedata') }}" //数据接口
        ,request: {
          pageName: 'page' //页码的参数名称，默认：page
          ,limitName: 'limit' //每页数据量的参数名，默认：limit
        }
        ,where: {start_time:start_time,end_time:end_time,key:key,state:state}
        ,cols: [[ //标题栏
          {field: 'id', title: 'ID', width: 80}
          ,{field: 'course', title: '课程', minWidth: 100}
          ,{field: 'img', title: '封面', width: 100,align:'center',templet:'<div><img src="@{{d.img}}"></div>'}
          ,{field: 'price', title: '价格', width: 100, align:'center'}
          ,{field: 'teacher', title: '老师', width: 100}
          ,{field: 'account', title: '账号', width:100}
          // ,{field: 'recommend', title: '推荐', width:105, align:'center',templet: '#recommendTpl'}
          ,{field: 'state', title: '启用', width: 105, align:'center',templet: '#stateTpl'}
          ,{field: 'time', title: '时间', width: 180, align:'center'}
          ,{title: '操作', width: 120, align:'center', toolbar: '#options'}
        ]]
        ,skin: 'line' //表格风格
        ,even: true
        ,page: true //是否显示分页
      });
      //监听工具条
      table.on('tool(dataTable)', function(obj){ //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
          var data = obj.data //获得当前行数据
          ,layEvent = obj.event; //获得 lay-event 对应的值
          if(layEvent === 'del'){
              layer.confirm('确认删除吗？', function(index){
                  $.ajax({
                    type: 'POST',
                    url: "{{ route('customer.delcourse') }}",
                    data:{id:data.id},
                    dataType:'JSON',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    },
                    success: function(datas){
                      if(datas.code==200){
                        $(obj.tr).remove();
                        layer.msg('已删除!',{icon:1,time:1000});
                      }else{
                        layer.msg('出错!',{icon:2,time:3000});
                      }
                    },
                    error:function(datas) {
                      alert('未知错误！')
                    },
                  });
              });
          } else if(layEvent === 'edit'){
              var feindex = layer.open({
                  type:2,
                  title:'编辑课程',
                  content:"{{url('customer/editcourse')}}"+'?id='+data.id
              });
              layer.full(feindex);
          }
      });

      $("#searchBtn").click(function () {
          start_time = $("#start_time").val()
          end_time = $("#end_time").val();
          key = $("#key").val()
          state=$("select[name=state]").val();
          dataTable.reload({
              where:{start_time:start_time,end_time:end_time,key:key,state:state},
              page:{page:1}
          })
      });
      laydate.render({
          elem: "#start_time",
      });
      laydate.render({
          elem: "#end_time",
      });
      function addCourse() {
          var findex = layer.open({
              type:2,
              title:'添加课程',
              content:"{{route('customer.addcourse')}}"
          });
          layer.full(findex);
      }
      /*禁用*/
      function state_off(id){
        $.ajax({
          type: 'POST',
          url: "{{ route('customer.course_state_off') }}",
          data:{id:id},
          dataType:'JSON',
          headers: {
              'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
          },
          success: function(datas){
            if(datas.code==200){
                  $("#state_"+id).attr("class","layui-btn layui-btn-disabled layui-btn-xs");
                  $("#state_"+id).attr("onClick","state_on("+id+")");
                  $("#state_"+id).text("已禁用");
                  return false;
            }else{
              layer.msg('出错!',{icon:2,time:3000});
            }
          },
          error:function(datas) {
            alert('未知错误！')
          },
        });
      }
      /*启用*/
      function state_on(id){
        $.ajax({
          type: 'POST',
          url: "{{ route('customer.course_state_on') }}",
          data:{id:id},
          dataType:'JSON',
          headers: {
              'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
          },
          success: function(datas){
            if(datas.code==200){
                  $("#state_"+id).attr("class","layui-btn layui-btn-success layui-btn-xs");
                  $("#state_"+id).attr("onClick","state_off("+id+")");
                  $("#state_"+id).text("已启用");
                  return false;
            }else{
              layer.msg('出错!',{icon:2,time:3000});
            }
          },
          error:function(datas) {
            alert('未知错误！')
          },
        });
      }
      /*不推荐*/
      function recommend_off(id){
        $.ajax({
          type: 'POST',
          url: "{{ route('customer.course_recommend_off') }}",
          data:{id:id},
          dataType:'JSON',
          headers: {
              'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
          },
          success: function(datas){
            if(datas.code==200){
                  $("#recommend_"+id).attr("class","layui-btn layui-btn-disabled layui-btn-xs");
                  $("#recommend_"+id).attr("onClick","recommend_on("+id+")");
                  $("#recommend_"+id).text("未推荐");
                  return false;
            }else{
              layer.msg('出错!',{icon:2,time:3000});
            }
          },
          error:function(datas) {
            alert('未知错误！')
          },
        });
      }
      /*推荐*/
      function recommend_on(id){
        $.ajax({
          type: 'POST',
          url: "{{ route('customer.course_recommend_on') }}",
          data:{id:id},
          dataType:'JSON',
          headers: {
              'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
          },
          success: function(datas){
            if(datas.code==200){
                  $("#recommend_"+id).attr("class","layui-btn layui-btn-success layui-btn-xs");
                  $("#recommend_"+id).attr("onClick","recommend_off("+id+")");
                  $("#recommend_"+id).text("已推荐");
                  return false;
            }else{
              layer.msg('出错!',{icon:2,time:3000});
            }
          },
          error:function(datas) {
            alert('未知错误！')
          },
        });
      }
    </script>
</body>
</html>